<template>
	<view class="content">
		<view class="gradient-bg">
			<!-- 渐变背景 -->
			<view class="list-card-wrap">
				<view class="flex-row-between" style="margin-bottom: 8rpx;">
					<view class="flex-row">
						<text class="white-text font-24">任务编号</text>
						<text class="white-text font-24" style="margin-left: 20rpx;">{{form.no}}</text>
					</view>
					<view class="tag tag-gray">{{form.storehouseLocationNo || form.storehouseNo}}</view>
				</view>
				<view class="list-card">
					<view class="">
						<text class="black-text-34">{{form.productName}}</text>
						<text class="gray-text font-30">({{form.productNo}})</text>
					</view>
					<view class="content-blue flex-row">
						<view class="flex-column flex1">
							<text class="gray-text">申请数量</text>
							<text class="black-text">{{form.orderQty}}</text>
						</view>
						<view class="split"></view>
						<view class="flex-column flex1">
							<text class="gray-text">实际入库数量</text>
							<text class="blue-text">{{form.actualQty}}</text>
						</view>
					</view>
					<view class="">
						<view class="flex-row-between">
							<text class="gray-text">创建时间</text>
							<text class="gray-text">{{form.createTime}}</text>
						</view>
						<view class="flex-row-between">
							<text class="gray-text">完成时间</text>
							<text class="gray-text">{{form.completeTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view scroll-y style="height: calc(100vh - 377rpx);"> -->
		<view class="table-wrap">
			<zb-table :show-header="true" :columns="column" :fit="true" :border="true" :data="tableData">
			</zb-table>
		</view>
		<!-- </view> -->

	</view>
</template>

<script>
	import {
		getYardageGoodsDetail,
		getYardageGoodsRecordList
	} from "./api"
	
	export default {
		data() {
			return {
				column: [
					{ type:'index', label: '序号', align: 'center', width:54 },
					{
						name: 'barCode',
						label: '条码',
						fixed: false,
						emptyString: '--'
					},
					{
						name: 'storehouseLocationNo',
						label: '库位',
						emptyString: '--'
					},
					{
						name: 'pickingQty',
						label: '数量',
						width: 30,
						emptyString: '--'
					}
				],
				tableData: []
			}
		},
		onLoad(option){
			this.form = {...this.form,...option};
			this.getYardageGoodsDetail()
		},
		methods:{
			// 获取详情数据
			getYardageGoodsDetail(){
				getYardageGoodsDetail(this.form.id).then(res=>{
					if (res.code == 200) {
						this.form = {...this.form, ...res.data}
						// if(this.form.orderStatus != 1){
							this.getYardageGoodsRecordList()
						// }
					}
				})
			},
			getYardageGoodsRecordList(){
				getYardageGoodsRecordList({pageNum:1, pageSize:0,taskNo:this.form.no}).then(res=>{
					if (res.code == 200) {
						this.tableData = res.rows
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped>

</style>
